<template>
  <view class="components-list tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed customBack :bottomShadow="false" backgroundColor="#FFFFFF">
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left-arrow'></text>
      </view>
      <view class="tn-flex tn-flex-col-center tn-flex-row-center ">
        <text class="tn-text-bold tn-text-xl tn-color-black">审批</text>
      </view>
    </tn-nav-bar>
    <view class="tn-text-center" :style="{paddingTop: vuex_custom_bar_height +'px'}">
      <demo-title>
        <view class="tn-margin-top-sm">
			<tn-list-cell>
			  <view class="list-icon-text">
			    <view class="list__left">
			      <view class="list__left__text tn-color-black tn-text-bold">审批编号</view>
			    </view>
			    <view class="list__right" @click="tn('')">
			      <view class="tn-text-sm tn-color-blue">2142412414141414141</view>
			    </view>
			  </view>
			</tn-list-cell>
      			<tn-list-cell>
      			  <view class="list-icon-text">
      			    <view class="list__left">
      			      <view class="list__left__text tn-color-black">货物信息</view>
      			    </view>
     			    <view class="list__right" @click="tn('')">
      			      <view class="tn-text-sm tn-color-blue">查看详情</view>
      			    </view>
      			  </view>
      			</tn-list-cell>
          <tn-list-cell>
            <view class="list-icon-text">
              <view class="list__left">
                <view class="list__left__text">货物名称</view>
              </view>
              <view class="list__right">
                <view class="tn-text-sm tn-color-gray">大豆</view>
              </view>
            </view>
          </tn-list-cell>
      		  <tn-list-cell>
      		    <view class="list-icon-text">
      		      <view class="list__left">
      		        <view class="list__left__text">货物状态</view>
      		      </view>
      		      <view class="list__right">
      		        <view class="tn-text-sm tn-color-gray">正常</view>
      		      </view>
      		    </view>
      		  </tn-list-cell>
      		  <tn-list-cell>
      		    <view class="list-icon-text">
      		      <view class="list__left">
      		        <view class="list__left__text">货物数量</view>
      		      </view>
      		      <view class="list__right">
      		        <view class="tn-text-sm tn-color-gray">1000吨</view>
      		      </view>
      		    </view>
      		  </tn-list-cell>
      		  <tn-list-cell>
      		    <view class="list-icon-text">
      		      <view class="list__left">
      		        <view class="list__left__text">储藏仓库</view>
      		      </view>
      		      <view class="list__right">
      		        <view class="tn-text-sm tn-color-gray">大西仓库</view>
      		      </view>
      		    </view>
      		  </tn-list-cell>
        </view>
      		</demo-title>
			
			<demo-title>
				<view class="tn-margin-top-sm">
					<tn-list-cell>
					  <view class="list-icon-text">
					    <view class="list__left">
					      <view class="list__left__text tn-color-black tn-text-bold">审批节点</view>
					    </view>
					  </view>
					</tn-list-cell>
					<tn-list-cell>
                      <!-- 发展历程 start-->
                      <view class="tn-flex tn-flex-wrap tn-padding-bottom">
                        <view class="king-list tn-margin-top-sm">
                          <view class="king-icon">
                            <text class='tn-icon-footprint tn-color-white tn-text-lg tn-bg-blue tn-round tn-padding-xs'></text>
                            <text class='tn-text-lg tn-margin-left tn-color-blue'>小儿</text>
                      			<text class='tn-text-lg tn-margin-left tn-color-gray'>发起申请</text>
                          </view>
                          
                          <view class='king-item  tn-icon-circle-fill tn-color-red'>
                      			   <view class="resume text-lg">
                      			     <text>2020-11-12 12:23:34</text>
                      			   </view>
                             <view class="tn-flex">
                               <view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
                                 <view class="" style="min-height: 105rpx;">
                                   <text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
                                     优质货物，请多给点额度
                                   </text>
                                 </view>
                               </view>
                             </view>
                          </view>
                          
                      		  <view class="king-icon">
                      		    <text class='tn-icon-footprint tn-color-white tn-text-lg tn-bg-blue tn-round tn-padding-xs'></text>
                      		    <text class='tn-text-lg tn-margin-left tn-color-blue'>管理员</text>
                      		  	<text class='tn-text-lg tn-margin-left tn-color-gray'>(已同意)</text>
                      		  </view>
                      		  
                      		  <view class='king-item  tn-icon-circle-fill tn-color-red'>
                      		  			   <view class="resume text-lg">
                      		  			     <text>2020-11-12 12:23:34</text>
                      		  			   </view>
                      		     <view class="tn-flex">
                      		       <view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
                      		         <view class="" style="min-height: 105rpx;">
                      		           <text class="tn-text-bold tn-color-blue clamp-text-2 tn-text-justify">
                      		             额度：200,00
                      		           </text>
									   <text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
									     符合规定
									   </text>
                      		         </view>
                      		       </view>
                      		     </view>
                      		  </view>
                        
                        </view>
                            
                      </view>
                      <!-- 比例图文 end-->
					</tn-list-cell>
				</view>
			</demo-title>
			<view class="tn-padding-bottom-lg"></view>
    </view>

	<view class="tn-tabbar-class tn-tabbar">
		<view class="tn-tabbar__content tn-tabbar--fixed tn-safe-area-inset-bottom tn-tabbar--shadow"
		      style="height:100rpx;backgroundColor:#E6E6E6;">
			<view class="tn-flex tn-flex-row-right tn-margin-top-sm">
				<view class="justify-content-item tn-padding tn-text-center tn-margin-sm">
		
				</view>
			  <view class="justify-content-item tn-padding tn-text-center tn-margin-sm">
				  <tn-button :shadow="true" @click="showModal1">拒绝</tn-button>
			  </view>
			  <view class="justify-content-item tn-padding tn-text-center tn-margin-sm">
				  <tn-button backgroundColor="#3668FC" class="" shadow @click="showModal2">
					<text class="tn-color-white tn-text-sm">同意</text>
				  </tn-button>
			  </view>
			</view>
			
			<tn-modal v-model="show1" :custom="true" :showCloseBtn="true">
			  <view class="custom-modal-content">
			    <view class="">
			      <view class="tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;margin: 50rpx 0 60rpx 0;">
			      	<tn-input placeholder="输入审批意见" type="textarea" placeholder-style="color:#AAAAAA"></tn-input>
			      </view>
			    </view>
			    <view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
			      <tn-button backgroundColor="#3668FC" width="50%" shadow fontBold>
			        <text class="tn-color-white">确认拒绝</text>
			      </tn-button>
			    </view>
			  </view>
			</tn-modal>
			
			<tn-modal v-model="show2" :custom="true" :showCloseBtn="true">
			  <view class="custom-modal-content">
			    <view class="">
				  <view class="tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;margin: 50rpx 0 60rpx 0;">
			      	<tn-input placeholder="输入额度" type="number" placeholder-style="color:#AAAAAA"></tn-input>
			      </view>
			      <view class="tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;margin: 50rpx 0 60rpx 0;">
			      	<tn-input placeholder="输入审批意见" type="textarea" placeholder-style="color:#AAAAAA"></tn-input>
			      </view>
			    </view>
			    <view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
			      <tn-button backgroundColor="#3668FC" width="50%" shadow fontBold>
			        <text class="tn-color-white">确认同意</text>
			      </tn-button>
			    </view>
			  </view>
			</tn-modal>
			
		</view>
	</view>
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  import demoTitle from '@/libs/components/demo-title.vue'
  export default {
    name: 'TemplateHistory',
    mixins: [template_page_mixin],
	components: {demoTitle},
    data(){
      return {
		show1: false,
		show2: false,
      }
    },
    methods: {
      // 弹出模态框
      showModal1(event) {
        this.show1=true
      },
	  showModal2(event) {
	    this.show2=true
	  },
      // 跳转
      tn(e) {
      	uni.navigateTo({
      		url: e,
      	});
      },
    }
  }
</script>

<style lang="scss" scoped>
  /* 胶囊*/
  .tn-custom-nav-bar__back {
    width: 60%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
  }
  
  /* 页面阴影 start*/
  .img-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  
  .top-fixed{
    position: fixed;
    background-color: rgba(255,255,255,1);
    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
    top: 0;
    width: 100%;
    transition: all 0.25s ease-out;
    z-index: 100;
  }

    
  
  /* 简历内容 */
  .king-list {
    display: block;
    // background-color: #ffffff;
  }
  
  .king-list .king-icon {
    width: 100%;
    text-align: left;
    padding: 20rpx 0 20rpx 37rpx;
    font-size: 26rpx;
    color: #888;
    display: block;
  }
  
  .king-list>.king-item {
    padding: 30rpx 30rpx 30rpx 120rpx;
    position: relative;
    display: block;
    z-index: 0;
  }
  
  .king-list>.king-item::after {
    content: "";
    display: block;
    position: absolute;
    width: 1rpx;
    background-color: #E6E6E6;
    left: 60rpx;
    height: 100%;
    top: 0;
    z-index: 8;
  }
  
  .king-list>.king-item::before {
    display: block;
    position: absolute;
    top: 36rpx;
    z-index: 9;
    background-color: #ffffff;
    width: 50rpx;
    height: 50rpx;
    text-align: center;
    border: none;
    line-height: 50rpx;
    left: 36rpx;
  }
  
  
  /* 名片微调 */
  .img-solid {
    border: 1rpx solid #eee;
  }
  
  .share-img {
    position: fixed;
    /* padding: 10rpx; */
    width: 100rpx;
    height: 100rpx;
    /* top: 680rpx; */
    bottom: 200rpx;
    right: 20rpx;
    z-index: 1024;
    opacity: 0.8;
    box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
    border: none;
    border: 6rpx solid rgba(255, 255, 255, 0);
  }
  
  .resume {
    display: flex;
    justify-content: space-between;
    padding-top: 10rpx;
    border-radius: 6rpx;
    color: #666;
    line-height: 1.6;
  }
  
  .resume+.resume {
    margin-top: 20rpx;
  }
  
  .resume2 {
    padding-top: 10rpx;
    border-radius: 6rpx;
    display: block;
    color: #666;
    line-height: 1.6;
    text-align: justify;
  }
  
  /* 间隔线 start*/
  .tn-strip-bottom {
   width: 100%;
   border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
  }
   /* 间隔线 end*/
  
  
  .bg-img-cont {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 350rpx;
    margin: 20rpx 0;
    border-radius: 8rpx;
  }
  
  /* 标签内容 start*/
  .tn-tag-content {
    &__item {
      display: inline-block;
      line-height: 35rpx;
      color: #1D2541;
      background-color: #F3F2F7;
      border-radius: 10rpx;
      font-size: 22rpx;
      padding: 5rpx 15rpx;
      
      &--prefix {
        padding-right: 10rpx;
      }
    }
  }
  
  /* 标签内容 end*/
  
  .see {
    display: flex;
    justify-content: space-between;
    padding-top: 10rpx;
    border-radius: 6rpx;
    color: #666;
    line-height: 1.6;
  }
     
   /* 悬浮 */
   .rocket-sussuspension{
     animation: tiger 3s ease-in-out infinite;
   }
   
   @keyframes tiger {
     0%, 100% {
       transform: translate(0 , 0);
     }
     50% {
       transform: translate(-0.8rem , 1rem);
     }
   }
     
   .login {
     position: relative;
     height: 100%;
     z-index: 1;
     
   /* 背景图片 start */
     &__bg {
       z-index: -1;
       position: fixed;
       
       &--top {
         top: 0;
         left: 0;
         right: 0;
         width: 100%;
         
         .bg {
           width: 750rpx;
           will-change: transform;
         }
         .rocket {
           margin: 50rpx 30%;
           width: 300rpx;
           will-change: transform;
         }
       }
       
       &--bottom {
         bottom: -10rpx;
         left: 0;
         right: 0;
         width: 100%;
         // height: 144px;
         // margin-bottom: env(safe-area-inset-bottom);
         
         image {
           width: 750rpx;
           will-change: transform;
         }
       }
     }
   }
   /* 背景图片 end */
   
   .article-shadow {
     border-radius: 15rpx;
     box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
   }
     
   /* 资讯主图 start*/
   .image-article {
     border-radius: 8rpx;
     border: 1rpx solid #F8F7F8;
     width: 160rpx;
     height: 160rpx;
     position: relative;
   }
   
   .image-pic {
     background-size: cover;
     background-repeat: no-repeat;
     // background-attachment:fixed;
     background-position: top;
     border-radius: 10rpx;
   }
  
  // .article-shadow {
  //   border-radius: 15rpx;
  //   box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  // }
  
  /* 文字截取*/
  .clamp-text-1 {
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .clamp-text-2 {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  /* 标签内容 start*/
  .tn-tag-content {
    padding-right: 10rpx;
    display: inline-block;
    line-height: 35rpx;
    padding: 5rpx 25rpx;
  }

  .components-list {
    background-color: $tn-bg-gray-color;
    min-height: 100vh;
  }
  
  .custom-title {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 10rpx 20rpx;
  }
  
  .list__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .list {
    &__left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      
      &__icon, &__image {
        margin-right: 18rpx;
      }
    }
    
    &__right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
  
  .list-icon-text, .list-image-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .list-image-text {
    .list {
      &__left {
        &__image {
          width: 20rpx;
          height: 20rpx;
        }
      }
    }
  }
  
 .tn-tabbar {
    
    &__content {
      box-sizing: content-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      position: relative;
      width: 100%;
      z-index: 1024;
      
      &__out {
        position: absolute;
        z-index: 4;
        border-radius: 100%;
        left: 50%;
        transform: translateX(-50%);
        
        &--shadow {
          box-shadow: 0rpx -10rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
          
          &::before {
            content: " ";
            position: absolute;
            width: 100%;
            height: 50rpx;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background-color: inherit;
          }
        }
        
        &--animation {
          &--scale {
            transform-origin: 50% 100%;
            animation:tabbar-content-out-click 0.2s forwards 1 ease-in-out;
          }
        }
      }
      
      &__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        height: 100%;
        position: relative;
        
        &__button {
          margin-bottom: 10rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          
          &--out {
            margin-bottom: 10rpx;
            border-radius: 50%;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 6;
            
            &--animation {
              &--scale {
                transform-origin: 50% 100%;
                animation:tabbar-item-button-out-click 0.2s forwards 1;
              }
            }
          }
          
          &--animation {
            &--scale {
              .tn-tabbar__content__item__icon, .tn-tabbar__content__item__image {
                transform-origin: 50% 100%;
                animation:tabbar-item-button-click 0.2s forwards 1;
              }
            }
          }
        }
        
        &__icon {
          
          &--clip {
            -webkit-background-clip: text;
            color: transparent !important;
          }
        }
        
        &__text {
          width: 100%;
          font-size: 26rpx;
          line-height: 28rpx;
          text-align: center;
          margin-bottom: 10rpx;
          z-index: 10;
          transition: all 0.2s ease-in-out;
        }
        
        &--out {
          height: calc(100% - 1px);
        }
      }
    }
    
    &--fixed {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
    }
    
    &--shadow {
      box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
    }
  }
  
  /* 点击动画 start */
  
  @keyframes tabbar-item-button-click{
    from{
      transform: scale(0.8);
    }
    to{
      transform: scale(1);
    }
  }
  
  @keyframes tabbar-item-button-out-click {
    0%{
      transform: translateY(0) scale(1);
    }
    50%{
      transform: translateY(-10rpx) scale(1.2);
    }
    100%{
      transform: translateY(0) scale(1);
    }
  }
  
  @keyframes tabbar-content-out-click {
    0%{
      transform: translateX(-50%) translateY(0) scale(1);
    }
    50% {
      transform: translateX(-50%) translateY(-10rpx) scale(1.1);
    }
    100% {
      transform: translateX(-50%) translateY(0) scale(1);
    }
  }
  
</style>
